
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Carousel Template · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/carousel/">

    <script src="../js/bootstrap.bundle.min.js"></script>
    <!-- <script src="../js/axios.js"></script>   -->
     <script src="https://unpkg.com/axios/dist/axios.min.js" ></script> 
     <script src="../js/vue.js"></script>
     

    <!-- Bootstrap core CSS -->
<link href="../style/bootstrap.min.css" rel="stylesheet">

    <style>
     
    </style>

    
    <!-- Custom styles for this template -->
    <link href="../style/carousel.css" rel="stylesheet">
  </head>
  <body>
 <main id="player">
    <header>
        <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top ">
          <div class="container-fluid">
              <a class="navbar-brand" href="#">音乐播放器</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="../src/index.html">主页</a>
                  </li>
                  <!-- <li class="nav-item">
                    <a class="nav-link" href="../src/details.html">我的</a>
                  </li> -->
                  <li class="nav-item">
                    <a class="nav-link" href="../src/zixun.html" v-on:click="top">热门排行榜</a>
                  </li>
                </ul>
                
                  
              
              </div>
            </div>
        </nav>
      </header>
      
<main >

 

  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- Three columns of text below the carousel -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-5" style="text-align: center;">
            <img :src="singercover"  width="270px"height="200px" style=" border-radius:25px;

            -moz-border-radius:25px; ">
    
          </div>
          <hr class="featurette-divider">
      <div class="col-md-7">
        <h2 class="featurette-heading">{{singername}}  <span class="text-muted"></span></h2>
        <p class="lead">{{detaillist.briefDesc}}</p>
      </div>
     
    </div>

    <hr class="featurette-divider">


    <!-- /END THE FEATURETTES -->

  </div><!-- /.container -->


  <!-- FOOTER -->
  <footer class="container">
    <p class="float-end"><a href="#">Back to top</a></p>
    <p>&copy; 2017–2021 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</main>
 </main>   


  

    
    </script>

    <script src="../js/main.js"></script>
 
      
  </body>
</html>
